<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Labels</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMBpYi6tuHlCfhkyypMB_IbpIA3l8jTq4&signed_in=true"></script>
    <script>
// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;

function initialize() {
  var bangalore = { lat: 27.812178, lng: 99.705261 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });
  
  // Add a marker at the center of the map.
  // addMarker(bangalore, map);
  addPackagesMarkers(map,'./marker.png','./marker.png','27.812178,28.333673,28.444067,28.444067,28.464266','99.705261,99.078926,98.882530,98.882530,98.818039');
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var image = './marker.png';
  /* var marker = new google.maps.Marker({
    position: location,
    label: '31',
    map: map,
    icon:image
  }); */
  
  var marker = new google.maps.Marker({
    position: location,
    label: "411",
    map: map,
    labelClass: "labels", // the CSS class for the label
    icon: image,
    zIndex:1
  });
  marker.setZIndex(999);
}

function addPackagesMarkers(map,bigImagePath,smallImagePath,lats,lngs){
	
    var latarr =  lats.toString().split(",");
    var lngarr =  lngs.toString().split(",");
    for (var i = 0; i < latarr.length; i++) {
    	
        var image;
        if(i == 0){
            image = {url: bigImagePath,scaledSize: new google.maps.Size(29, 40),};
        }else{
            image = {url: smallImagePath,scaledSize: new google.maps.Size(24, 33),};
        }
        var lati = latarr[i];
        var lngi = lngarr[i];
        
        var bangalore1 = { lat: 27.812178, lng: 99.705261 };
        
        var m_packages = new google.maps.Marker({
            position: bangalore1,
            label: '1',
            icon: image,
            map: map,
        });
        //m_packages.setZIndex(999);
        //markers_packages.push(m_packages);
        
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

